<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('学员成绩展示')">

</head>
<body>
  <div id="content" class="col-lg-12 col-sm-12">
    <!--<div class="row"><h2 id="myTableName" style="text-align:center;">学员成绩展示</h2></div>-->
    <div class="row">
        <div class="col-xs-6 col-md-6">
          <div id="main1" style="width: 100%;height:370px;"></div>
        </div>
        <div class="col-xs-6 col-md-6">
          <div id="main2" style="width: 100%;height:370px;"></div>
        </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-md-6">
        <div id="main3" style="width: 100%;height:360px;"></div>
      </div>
      <div class="col-xs-6 col-md-6">
        <div id="main4" style="width: 100%;height:360px;"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <div id="main5" style="width: 100%;height:400px;"></div>
      </div>
    </div>
  </div>
  <div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="https://hnres.etalk365.com/public/lib/echarts/5.1.1/echarts.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
      //生成学校期中期末成绩曲线图
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = echarts.init(document.getElementById('main1'));
      /*<![CDATA[*/
      // 指定图表的配置项和数据
      let option1 = {
        title: {
          text: '学校成绩',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        /*legend: {
          top: 25,
          data:["学校成绩"]
        },*/
        xAxis: {
          axisLabel: {
            interval:0,
            rotate:30
          },
          data: [[${schoolName}]]
        },
        grid: {
          left: '10%',
          bottom:'25%'
        },
        yAxis: [
          {
            name: '分数',
            type: 'value'
          }
        ],
        dataZoom: [{
          start: 0,
          end: 100
        }],
        series: [
          {name: '学校成绩',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${schoolScore}]]
          }
        ]
      };
      /*]]>*/
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      $(window).resize(function () {
        myChart1.resize();
      });
    </script>

    <script type="text/javascript" th:inline="javascript">
      //生成Etalk期中期末成绩曲线图
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = echarts.init(document.getElementById('main2'));
      /*<![CDATA[*/
      // 指定图表的配置项和数据
      let option2 = {
        title: {
          text: 'Etalk期中期末成绩',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        /*legend: {
          top: 25,
          data:["学校成绩"]
        },*/
        xAxis: {
          axisLabel: {
            interval:0,
            rotate:30
          },
          data: [[${etalkName}]]
        },
        grid: {
          left: '10%',
          bottom:'25%'
        },
        yAxis: [
          {
            name: '分数',
            type: 'value'
          }
        ],
        dataZoom: [{
          start: 0,
          end: 100
        }],
        series: [
          {name: 'Etalk期中期末成绩',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${etalkScore}]]
          }
        ]
      };
      /*]]>*/
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
      $(window).resize(function () {
        myChart2.resize();
      });
    </script>

    <script type="text/javascript" th:inline="javascript">
      //生成Etalk单元测成绩曲线图
      // 基于准备好的dom，初始化echarts实例
      let myChart3 = echarts.init(document.getElementById('main3'));
      /*<![CDATA[*/
      // 指定图表的配置项和数据
      let option3 = {
        title: {
          text: 'Etalk单元测成绩',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        /*legend: {
          top: 25,
          data:["学校成绩"]
        },*/
        xAxis: {
          axisLabel: {
            interval:0,
            rotate:30
          },
          data: [[${unitName}]]
        },
        grid: {
          left: '10%',
          bottom:'25%'
        },
        yAxis: [
          {
            name: '分数',
            type: 'value'
          }
        ],
        dataZoom: [{
          start: 50,
          end: 100
        }],
        series: [
          {name: 'Etalk单元测成绩',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${unitScore}]]
          }
        ]
      };
      /*]]>*/
      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option3);
      $(window).resize(function () {
        myChart3.resize();
      });
    </script>

    <script type="text/javascript" th:inline="javascript">
      //生成Etalk单元测成绩曲线图
      // 基于准备好的dom，初始化echarts实例
      let myChart4 = echarts.init(document.getElementById('main4'));
      /*<![CDATA[*/
      // 指定图表的配置项和数据
      let option4 = {
        title: {
          text: 'Etalk课后练习成绩',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        /*legend: {
          top: 25,
          data:["学校成绩"]
        },*/
        xAxis: {
          axisLabel: {
            interval:0,
            rotate:30
          },
          data: [[${homeworkName}]]
        },
        grid: {
          left: '10%',
          bottom:'25%'
        },
        yAxis: [
          {
            name: '分数',
            type: 'value'
          }
        ],
        dataZoom: [{
          start: 70,
          end: 100
        }],
        series: [
          {name: 'Etalk课后练习成绩',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${homeworkScore}]]
          }
        ]
      };
      /*]]>*/
      // 使用刚指定的配置项和数据显示图表。
      myChart4.setOption(option4);
      $(window).resize(function () {
        myChart4.resize();
      });
    </script>

    <script type="text/javascript" th:inline="javascript">
      //生成老师对学员上课态度和学术表现平均得分
      // 基于准备好的dom，初始化echarts实例
      let myChart5 = echarts.init(document.getElementById('main5'));
      /*<![CDATA[*/
      // 指定图表的配置项和数据
      let option5 = {
        title: {
          text: '课后老师评分',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        legend: {
          orient: 'vertical',
          align: 'right',
          right: 20,
          top: 50,
          data:["上课参与度","上课专注度","听力理解度","发音准确度","词汇掌握度","语法掌握度","口语流利度"]
        },
        xAxis: {
          axisLabel: {
            interval:0,
            rotate:30
          },
          data: [[${studyName}]]
        },
        grid: {
          left: '10%',
          bottom:'25%'
        },
        yAxis: [
          {
            name: '月平均得分',
            type: 'value'
          }
        ],
        dataZoom: [{
          start: 50,
          end: 100
        }],
        series: [
          {name: '上课参与度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listParticipation}]]
          },
          {name: '上课专注度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listConcentration}]]
          },
          {name: '听力理解度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listListening}]]
          },
          {name: '发音准确度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listPronunciation}]]
          },
          {name: '词汇掌握度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listVocabulary}]]
          },
          {name: '语法掌握度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listGrammar}]]
          },
          {name: '口语流利度',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: [[${listSpoken}]]
          }
        ]
      };
      /*]]>*/
      // 使用刚指定的配置项和数据显示图表。
      myChart5.setOption(option5);
      $(window).resize(function () {
        myChart5.resize();
      });
    </script>
  </div>
</body>
</html>